<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

        <div class="block">
          <el-form-item :label="$t('transfer.TransferDate')" prop="TransferDate">
            <el-date-picker v-model="TransferDate" type="daterange" unlink-panels range-separator="To"
              start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />
          </el-form-item>
          <el-form-item :label="$t('transfer.DocNo')">
            <el-input v-model="state.queryForm.DocNo" :placeholder="$t('transfer.DocNo')" />
          </el-form-item>
          <el-form-item :label="$t('transfer.MaterialCode')">
            <MaterialSelect v-model="state.queryForm.MaterialCode" style="width: 150px;" />
          </el-form-item>
          <el-form-item :label="$t('transfer.OutWarehouse')">
            <WarehouseSelect v-model="state.queryForm.OutWarehouse" style="width: 150px;" />
          </el-form-item>
          <el-form-item :label="$t('transfer.InWarehouse')">
            <WarehouseSelect v-model="state.queryForm.InWarehouse" style="width: 150px;" />
          </el-form-item>
          <el-form-item :label="$t('qms.barCode')">
            <el-input v-model="state.queryForm.Barcode" :placeholder="$t('qms.barCode')" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" @click="query"> {{ $t('so.query') }}</el-button>
            <el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>
            <el-button plain class="ml10" icon="Download" type="success" @click="exportxlsx">
              {{ $t('common.exportBtn') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
        style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
        :header-cell-style="tableStyle.headerCellStyle">

        <el-table-column type="index" label="#" width="80" fixed />
        <el-table-column :label="$t('transfer.DocNo')" prop="k3DocNo" width="200" fixed>
          <template #default="scope">
            <el-tag :type="'info'" :effect="'dark'">
              {{ scope.row.k3DocNo }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('rawTransferLog.transferDate')" prop="creationTime" width="160" fixed />
        <el-table-column :label="$t('rawTransferLog.operator')" prop="createUserName" width="120" fixed />
        <el-table-column :label="$t('rawTransferLog.sourceWarehouseName')" prop="sourceWarehouseName" width="120" />
        <el-table-column :label="$t('rawTransferLog.sourceLocationName')" prop="sourceLocationName" width="200"
          show-overflow-tooltip />
        <el-table-column :label="$t('rawTransferLog.targetWarehouseName')" prop="targetWarehouseName" width="110" />
        <el-table-column :label="$t('rawTransferLog.targetLocationName')" prop="targetLocationName" width="200"
          show-overflow-tooltip />
        <el-table-column :label="$t('qms.barCode')" prop="barcode" width="200" />
        <el-table-column :label="$t('transfer.Qty')" prop="qty" width="120">
          <template #default="scope">
            <el-tag :type="'primary'" :effect="'light'">
              {{ scope.row.qty }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="splitFlag" :label="$t('transfer.SplitFlag')" show-overflow-tooltip width="100">
          <template #default="scope">
            <el-tag :type="scope.row.splitFlag === 'Y' ? 'success' : 'danger'"
              :effect="scope.row.splitFlag === 'Y' ? 'dark' : 'light'">
              {{ scope.row.splitFlag }}
            </el-tag>
          </template>
        </el-table-column><el-table-column :label="$t('transfer.SplitBarcode')" prop="splitBarcode" width="200" />
        <el-table-column :label="$t('transfer.MaterialCode')" prop="materialCode" width="140" />
        <el-table-column :label="$t('transfer.MaterialName')" prop="materialName" width="200" />
        <el-table-column :label="$t('transfer.MaterialSpec')" prop="materialSpec" width="230" show-overflow-tooltip />
        <el-table-column :label="$t('transfer.Unit')" prop="unit" />
        <el-table-column :label="$t('basDicSet.remark')" prop="remark" show-overflow-tooltip />
        <el-table-column :label="$t('qms.shiftCode')" prop="shiftCode" width="130" />
        <el-table-column :label="$t('transfer.JobId')" prop="jobId" />
      </el-table>

      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
  </div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getRawTransferLog } from '/@/api/platform/report/RawTransferLog';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import MaterialSelect from '/@/components/mes/select/MaterialSelect.vue';
import WarehouseSelect from '/@/components/mes/select/WarehouseSelect.vue';
const { t } = useI18n();
// 搜索变量
const queryRef = ref();
const getYMD = (date: any) => {
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 yyyy-MM-dd 格式的字符串
  const formattedDate = `${year}-${month}-${day}`;

  return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const TransferDate = ref([endDate, today]);
// 搜索变量
const tableRef = ref();
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const exportxlsx = () => {
  downBlobFile('/report/rawTransferLog/ExportInventoryDetails', {
    "outWarehouse": state.queryForm.outWarehouse,
    "inWarehouse": state.queryForm.inWarehouse,
    "barcode": state.queryForm.barcode,
    "docNo": state.queryForm.docNo,
    "materialCode": state.queryForm.materialCode
  }, 'RawTransferLog' + getNowFormatDate() + '.xlsx');
}
function getNowFormatDate() {
  var date = new Date();
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 年月日时分秒 格式的字符串
  var currentdate = year + month + day
    + date.getHours() + date.getMinutes()
    + date.getSeconds();
  return currentdate;
}


//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    TransferDateStart: TransferDate.value ? getYMD(TransferDate.value[0]) : '',
    TransferDateEnd: TransferDate.value ? getYMD(TransferDate.value[1]) : '',
  },
  pageList: getRawTransferLog,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  state.queryForm = {
    TransferDateStart: '',
    TransferDateEnd: '',
    DocNo: '',
    MaterialCode: '',
    OutWarehouse: '',
    InWarehouse: '',
    Barcode: ''
  };
  state.queryForm.TransferDate = ''
    // 清空搜索条件
    state.queryForm = {}
  // 清空搜索条件
  queryRef.value?.resetFields()
  // console.log('queryRef.value', queryRef.value)
  TransferDate.value = '';
  getDataList(false);
};

const query = () => {
  console.log('query', TransferDate.value);
  state.queryForm.TransferDateStart = TransferDate.value ? getYMD(TransferDate.value[0]) : '';
  state.queryForm.TransferDateEnd = TransferDate.value ? getYMD(TransferDate.value[1]) : '';
  getDataList();
};

</script>